<script setup>
import { ref, computed } from "vue"

const keyWord = ref('')

const results = computed(() => {
    const arr = [{ user: "Alice" }, { user: "Bob" }, { user: "charlie" }, { user: "David" }]
    if (keyWord.value === '') {
        return arr
    } else {
        return arr.filter(item => { return item.user.toLowerCase().includes(keyWord.value.toLowerCase()) })
    }


})

</script>

<template>
    <input v-model="keyWord" />
    <li v-for="result in results">{{ result.user }}</li>
</template>